<template>
    <view class="container">
        <view class="h-74"></view>
        <view class="icon-logo"></view>
        <view class="qrcode-info">
            <view class="tips">请使用微信扫一扫，立即支付</view>
            <u-text
                size="58rpx"
                color="#000000"
                bold
                :text="payPrice"
                prefixIcon="rmb"
                iconStyle="font-size: 40rpx; color: #000000; top: 10rpx;"
                align="center"
                margin="45rpx 0 0 0"
            ></u-text>
            <view class="uqrcode" v-if="qrcodeUrl">
                <uqrcode
                    :text="qrcodeUrl"
                    cid="uQRCode"
                    :size="184"
                ></uqrcode>
            </view>
        </view>
        <view style="padding: 0 30rpx">
            <u-button
                :plain="true"
                text="已支付成功，去查看"
                customStyle="margin-top: 50rpx;color: #000000;border: 1px solid #9FD9FD;"
                @click="$u.route('pages_v2/myPage/index')"
            >
            </u-button>
        </view>
    </view>
</template>

<script>
    import { getUnionWechatPay, unionTopUp } from "@/config/api-java"
    import uqrcode from '@/uni_modules/uQRCode/components/uqrcode/uqrcode'
    export default {
        name: "index",
        components: {
            uqrcode
        },
        data() {
          return {
              payPrice: null,
              qrcodeUrl: null,
              webviewStyles: {
                  progress: {
                      color: '#FF3333',
                      width: '368rpx',
                      height: '368rpx',
                      margin: '113rpx auto 0 auto'
                  }
              }
          }
        },
        async onLoad(option) {
            this.payPrice = option.payPrice
            if (option.type=='topUp') {
                const res = await unionTopUp(option.id)
                this.qrcodeUrl = res.codeUrl
            } else {
                console.log(option)
                const res = await getUnionWechatPay(option.id, {userTicketId: option.userTicketId})
                this.qrcodeUrl = res.codeUrl
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100vw;
        height: 100vh;
        background: url("https://img.ionepin.com/5d42f009b2bdb4f37f450d326cf73827ab8030cd.png") no-repeat;
        background-size: 100% 100%;
        .h-74 {
            height: 74rpx;
        }
        .icon-logo {
            background: url("https://img.ionepin.com/d54ef74ac7e5611c1261aa9d291676eeacbeb1cc.png") no-repeat;
            background-size: 100% 100%;
            width: 86rpx;
            height: 56rpx;
            margin: 0 auto;
        }
        .qrcode-info {
            box-sizing: border-box;
            background: url("https://img.ionepin.com/4fa1dc82bd97f2fcd48222cec576f0e157d2ce20.png") no-repeat;
            background-size: 100% 100%;
            width: 680rpx;
            height: 888rpx;
            margin: 50rpx auto 0 auto;
            padding-top: 93rpx;
            .tips {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #356CE7;
                line-height: 1.5;
                text-align: center;
            }
            .uqrcode {
                margin: 113rpx auto 0 auto;
            }
        }
    }
</style>
